<template>
  <div>
    <h1>
      <div :class="{ red: redShow, green: greenShow }">传智教育</div>
      <div :class="classes">黑马程序员</div>
    </h1>
    <button @click="redShow = !redShow">切换红色</button>
    <button @click="greenShow = !greenShow">切换绿色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      redShow: false,
      greenShow: false,
      classes: ['box', 'red', 'c', 'b'],
    }
  },
}
</script>

<style>
.red {
  color: red;
}
.green {
  color: green;
}
</style>
